<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<spring:url
	value="/resources/js-framework/datatables/jquery.dataTables.css"
	var="jquery_dataTables_css" />
<spring:url
	value="/resources/js-framework/datatables/jquery.dataTables.min.js"
	var="jquery_dataTables_min_js" />
<spring:url
	value="/resources/js-framework/populate/jquery.populate.pack.js"
	var="jquery_populate_pack_js" />

<!-- DataTables CSS -->
<link href="${jquery_dataTables_css}" media="screen" rel="stylesheet"
	type="text/css" />
<!-- DataTables -->
<script src="${jquery_dataTables_min_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<!-- Populate -->
<script src="${jquery_populate_pack_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<script>
		// Wait until the DOM has loaded before querying the document
		$(document).ready(function(){
		$(".tab_div").hide();
		$('ul.tabs a').click(function () {
			$(".tab_div").hide().filter(this.hash).show();
			$("ul.tabs a").removeClass('active');
			$(this).addClass('active');
			return false;
		}).filter(':first').click();
		
		var customerTable = $('#customerTableId').dataTable({
			"sDom": '<"projecttoolbar">lfrtip'
		});
		$("div.projecttoolbar").html(
				'<div class="btnIcon" style="margin-left: 10px; margin-bottom:10px;margin-top:-5px;border:0px solid #ff0000;">'+
					'<a href="#" class="blue_link" id="addNew" >'+
						'<img src="resources/images/addUser.gif" width="16" height="22" /> '+
					'Add New </a>'+
				'</div>');
		
	  		customerTable.$('tr').dblclick( function () {
	  		    var sData = customerTable.fnGetData(this);
	  		    openMaintainance(($(this).attr('id')));
	  		    	
	  		});
	  		$('#addNew, #update').click(function(){
				$("#customerForm").reset();
				displayMaintainance();
			});
	  		$('a[href$="tab2"]').click(function(){
				$("#customerForm").reset();
				
			});
		});
		
		function openMaintainance(id){
			getCustomerById(id);
			displayMaintainance();
		}
		
		function getCustomerById(id){
			$.getJSON("customers/"+id,{}, showCustomer);
		}
		
		function showCustomer(data){
			$("#customerForm").populate(data, {debug:false, resetForm:true});
		}
		
		function displayMaintainance(){
			$("ul.tabs a").removeClass('active');
			$(".tab_div").hide().next("#tab2".hash).show();
			$('a[href$="tab2"]').addClass('active');
		}
		
		function saveCustomer(){
			var pk = $("#customerForm input[name=id]").val() ;
			//not doing any validation .. We will use jquery validation framework to do that for us before form gets submitted
			if( pk != null && pk > 0){
				 $.putJson('customers', $("#customerForm").toDeepJson() , function(data){
					 location.reload();
				 } , 'json');
			}else{
				 $.postJson('customers',$("#customerForm").toDeepJson() , function(data){
					 //should call refreshGrid instead of location reload, and update customerTableId table.
					 location.reload();
				}, 'json'); 				
			}
		}
		
		function refreshGrid(){
			$.getJSON("customers", function(data){
				
			});
		}
</script>


<div class="mid_section">
	<!--right section-->
	<div class="botMargin">
		<h1>Customer</h1>
	</div>
	<div class="tab_seaction">
		<ul class='tabs'>
			<li><a href='#tab1'>List</a></li>
			<li><a href='#tab2'>Maitainance</a></li>
		</ul>
		<div id='tab1' class="tab_div">
			<div class="tbl">
				<table class="dataTable" id="customerTableId">
					<thead>
						<tr>
							<th width="15%" align="center" valign="middle">Customer ID</th>
							<th width="15%" align="center" valign="middle">Customer name</th>
							<th width="15%" align="center" valign="middle">Geography</th>
							<th width="15%" align="center" valign="middle">Strategic /
								Non strategic</th>
							<th width="15%" align="center" valign="middle">Account
								Manager</th>
							<th width="15%" align="center" valign="middle">AC Manager
								Contact Number</th>
							<th width="10%" align="center" valign="middle">Customer
								Address</th>
						</tr>
					</thead>
					<tbody>

						<c:forEach var="customer" items="${customers}">
							<tr id="${customer.id}">
								<td align="center" valign="middle"><a href="#"
									onclick="openMaintainance(${customer.id});"> ${customer.id}</a>
								</td>
								<td align="center" valign="middle">${customer.customerName}</td>
								<td align="center" valign="middle">${customer.geography}</td>
								<td align="center" valign="middle"><c:choose>
										<c:when test="${customer.stratagic}">
									        	Yes
									    	</c:when>
										<c:otherwise>
									        	No
									    	</c:otherwise>
									</c:choose></td>
								<td align="center" valign="middle">${customer.accountManager}</td>
								<td align="center" valign="middle">${customer.accountManagerContactNumber}</td>
								<td align="center" valign="middle">${customer.customerAddress}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="clear"></div>
		</div>
		<div id='tab2' class="tab_div">
			<div class="search_filter">
				<div align="right">
					<a href="#" class="blue_link" id="save" onclick="saveCustomer();">
						<img src="resources/images/save.png" name="save" width="16"
						height="22" /> Save
					</a>
				</div>
			</div>
			<div class="form">
				<form id="customerForm" name="customerForm" action="customers">
					<table border="0" cellpadding="0" cellspacing="5" width="100%">
						<tr>
							<td width="15%" align="right">Customer ID:<span
								class="astric">*</span>
							</td>
							<td width="18%" align="left"><input id="mCusotmerId"
								type="text" value="" name="id" readonly="readonly" /></td>
							<td width="15%" align="right">Customer name:<span
								class="astric">*</span></td>
							<td width="15%" align="left"><input id="mCusotmerName"
								type="text" value="" name="customerName"></td>
							<td width="18%" align="right">Geography:<span class="astric">*</span></td>
							<td width="20%" align="left"><input type="text"
								id="mGeography" value="" name="geography" /></td>
						</tr>
						<tr>
							<td align="right">Strategic:<span class="astric">*</span>
							</td>
							<td align="left">
								<div class="radio_btn">
									<span class="radio_b"> <input type="radio" value="true"
										name="stratagic">
									</span> <span class="radio_lbl">Yes</span>
								</div>
								<div class="radio_btn">
									<span class="radio_b"> <input type="radio" value="false"
										name="stratagic">
									</span> <span class="radio_lbl">No</span>
								</div>
							</td>
							<td align="right">Account Manager:<span class="astric">*</span></td>
							<td align="left"><input type="text" value=""
								id="mAaccountManager" name="accountManager"></td>
							<td align="right">AC Manager Contact Number:</td>
							<td align="left"><input type="text" value=""
								id="mAccountManagerContactNumber"
								name="accountManagerContactNumber" /></td>
						</tr>
						<tr>
							<td align="right">Customer Address:</td>
							<td align="left"><input type="text" value=""
								id="mCustomerAddress" name="customerAddress" /></td>
							<td colspan="4" align="right">&nbsp;</td>
						</tr>
					</table>
				</form>
			</div>
		</div>

	</div>
	<!--right section-->
</div>